<!--20210304    zaq    创建vue文件-->



<template>
<!--日程主页-->
  <div>
    <div class="left-wrap" >
      <div class="calendar-wrap">
        <el-calendar :first-day-of-week=7>
<!--          每周开始日期为周日-->
          <template
              slot="dateCell"
              slot-scope="{date, data}">
            <p>
              {{ data.day.split('-').slice(2).join('-') }}<br />
            </p>
            <!--标记-->
            <div v-if="data.day=='2020-08-23'||data.day=='2020-08-19'" class="red budge"></div>
            <div v-if="data.day=='2020-08-09'||data.day=='2020-08-13'" class="green budge"></div>
            <div v-if="data.day=='2020-08-12'||data.day=='2020-08-22'" class="orange budge"></div>
          </template>
        </el-calendar>
      </div>
    </div>
  </div>

</template>

<script>
export default {
  name: "Calendar",
  data(){
    return {
    }
  },
  methods:{

  }
}
</script>

<style scoped>
.left-wrap /deep/ .el-calendar-table .el-calendar-day{
  padding: 22px;
}
.left-wrap /deep/ .el-backtop, .el-calendar-table td.is-today p{
  height: 30px;
  width: 30px;
  color: white;
  border-radius: 15px;
  line-height: 30px;
  margin: 0 auto;
  margin-top: -6px;
  background-image: linear-gradient(to right, #2160dc, #4880f0);
}
.budge{
  width: 10px;
  height: 10px;
  border-radius: 5px;
  margin: 5px auto;
}
.red{
  background-color: #c9413f;
}
.green{
  background-color: #25b591;
}
.orange{
  background-color: #ee915c;
}
.calendar-wrap /deep/ .el-calendar-table tr td:first-child,
.calendar-wrap /deep/ .el-calendar-table tr td:last-child{
  background-color: #f9f8fe;
}
</style>